<template>
	<view>
		<!-- 如果购物车列表数组不为空(长度不为0)，显示列表 -->
		<block v-if="cartList.length !== 0">
		<!-- 1.0 购物车列表 -->
		<view class="cart">
			<view v-for="item in cartList" :key="item.goods_id" class="cart_item">
				<view class="cart_item_check">
					<!-- 这里的 radio 仅仅当做普通标签使用 -->
					<radio @tap="changeItemCheck(item.goods_id)" :checked="item.goods_check" color="#EB4450" />
				</view>
				<view class="cart_item_info">
					<goodsItem :item="item" />
					<view class="count">
						<view @tap="changeCount(item.goods_id, -1)" class="count_btn">-</view>
						<view class="count_number">{{ item.goods_count }}</view>
						<view @tap="changeCount(item.goods_id, 1)" class="count_btn">+</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 2.0 底部结算栏 -->
		<view class="bottom">
			<!-- 全选按钮 -->
			<label class="bottom_label">
				<radio @tap="changeCheckAll" class="bottom_label_check" :checked="checkAll" color="#EB4450"></radio>
				<text class="bottom_label_text">全选</text>
			</label>
			<!-- 价格合计 -->
			<text class="bottom_total">
				<text class="bottom_total_text">合计:</text>
				<text class="goods_price">{{ totalPrice }}</text>
			</text>
			<!-- 结算按钮 -->
			<view 
				@tap="goToPay" 
				class="bottom_btn"
				:class="{ disabled: totalCount === 0 }"
			>
			去结算({{totalCount}})
			</view>
		</view>
		</block>
		<!-- 如果为空 -->
		<block v-else>
		<view class="cart_empty">
			<navigator class="cart_empty_navigator" open-type="switchTab" url="/pages/index/main">
				<view class="cart_empty_image">🚘</view>
				<text class="cart_empty_text">去首页看看</text>
			</navigator>
		</view>
		</block>
	</view>
</template>

<script>
	/*
		1. 在 onShow 页面显示的时候获取最新的购物车数据
			知识点：微信小程序生命周期
			
		2. 导入，注册 并 使用 goodsItem 组件实现商品列表
			知识点：组件数据父传子

		3. 底部栏计算功能：
			知识点：computed 计算
			1. 计算 "总价格"       选中的商品 ， 单价 * 数量  的累加结果
			2. 计算 "全选状态"     所有的都选中才能选中
			3. 计算 "选中商品种类"(淘宝)  或  "选中商品总件数"(京东)

		4. 商品选择按钮
			知识点：事件绑定
			1. 如果希望有更大的触发区域，可以把事件绑定为按钮的父级元素。
			2. 让当前的选择状态取反。
		
		5. 商品数量计数器  
			知识点：模态窗口API
			1. 点击加号，商品数量 +1 即可
			2. 点击减号，商品数量 -1 
				1. 如果当前商品数量为 1，点击减号的时候提示用户是否要删除
					1. 点击确定就删除当前商品。
					
		6. 监听 cartList 数据变化，数据变化就更新本地存储 
				知识点：watch 数据监听
								- deep: true,
								- handler(){ }
				
		7. 全选按钮
				1. 点击的时候，把原本的状态取反
				2. 通过 forEach 把状态更新到购物车列表的每个商品中
							
		8. 购物车列表空状态
				1. v-if="cartList.lenth === 0" 判断数组长度是否不为 0 ，展示 购物车列表
				2. v-else 长度为 0 的情况，展示空购物车状态
		
		9. 点击去结算按钮
				1. 判断选中的商品种类是否为 0，提示 "你还没选择商品哦"
				2. 选中商品的情况，跳转到支付页
				
	*/ 
	import goodsItem from '@/components/goodsItem/main';
	// uni-app 行为写这里
	export default {
		components:{
			goodsItem
		},
		data() {
			return {
				cartList: [],
			}
		},
		// Vue 的监听功能
		watch: {
			cartList:{
				// 深度监听 cartList 变化
				deep: true,
				// 监听 cartList 后内部干些什么
				handler(){
					// 把最新的 cartList 更新到本地存储
					uni.setStorageSync('cartList', this.cartList);
				}
			}
		},
		// Vue 的计算功能
		computed:{
			// 全选状态计算
			checkAll(){
				// 全选初始值为 false
				let checkAll = false;
				// 如果数组长度不为 0
				if(this.cartList.length !== 0){
					// 通过 every 检测数组每项是否都为 true，
					// 	- 如果有一项为 false，返回结果 false 并退出
					//  - 全部为 true，最终返回结果 true
					checkAll = this.cartList.every(item=> item.goods_check);
				}
				// 返回计算全选状态计算结果
				return checkAll;
			},
			// 计算商品总价格
			totalPrice(){
				// 初始化总价格为 0
				let totalPrice = 0;
				// 遍历数组每一项 
				this.cartList.forEach(item=>{
					// 当前商品是否为选中状态
					if(item.goods_check){
						// 把选中商品的 单价 * 数量 结果累加到 总金额中。
						totalPrice += item.goods_price * item.goods_count;
					}
				})
				// 返回计算结果
				return totalPrice;
			},
			// 选中商品数量 - 这部分业务不同公司规则有些差异，如果不确定可以和产品经理沟通
			totalCount(){
				// 淘宝：选中商品 <种类数量>
				// return this.cartList.filter(item=>item.goods_check).length;

				// 京东：选中商品 <总件数> - 业务类似计算商品总价格
				let totalCount = 0;
				this.cartList.forEach(item=>{
					if(item.goods_check){
						totalCount += item.goods_count;
					}
				});
				return totalCount;
			}
		},
		// 页面加载的时候触发一次
		onLoad() {
			
		},
		// 页面显示就会触发 - 购物车用这个生命周期函数更合理
		onShow(){
			// 获取购物车本地存储数据
			const cartList = uni.getStorageSync('cartList') || [];
			// console.log('cartList', cartList);
			// 把数据绑定到页面 data 中
			this.cartList = cartList;
		},
		// uni-app 事件写到 methods 中
		methods: {
			// 点击去结算的按钮
			goToPay(){
				// 1. 判断选中的商品数量是否为 0，提示 "你还没选择商品哦"
				// 2. 选中商品的情况，跳转到支付页
				if(this.totalCount === 0){
					uni.showToast({ title: '你还没选择商品哦', icon: 'none'});
					// uni.showToast({ title: '你还没选择商品哦', image: '/static/tabs/cart_selected.png'});
				}else{
					// console.log('跳转到支付页面');
					uni.navigateTo({ url: '/pages/pay/main' });
				}
			},
			// 改变全选状态
			changeCheckAll(){
				// console.log('改变全选状态');
				// console.log(this.checkAll);
				// 获取当前的状态并取反
				const checkAll = !this.checkAll;
				// 遍历列表中的每一项，把状态更新成取反后的值
				this.cartList.forEach(item=>item.goods_check = checkAll);
			},
			// 改变商品数量
			changeCount(goods_id, number){
				// console.log(goods_id, number);
				// 根据商品 goods_id 从最新的数组中查找到最新的索引
				const index = this.cartList.findIndex(item=>item.goods_id === goods_id);
				// 如果当前点击的是减号，同时商品数量是 1，提示用户是否要删除商品
				if(number === -1 && this.cartList[index].goods_count === 1){
					// console.log('提示用户是否删除商品');
					uni.showModal({
						content: '😢是否删除当前商品',
						confirmText: '删除',
						confirmColor: '#ccc',
						success: (res) => {
							if (res.confirm) {
								// console.log('用户点击确定，执行删除逻辑');
								// .splice(索引, 删除个数)
								this.cartList.splice(index, 1);
							}
						}
					});
				}else{
					this.cartList[index].goods_count += number;
				}
			},
			// 改变商品选中状态
			changeItemCheck(goods_id){
				// console.log(goods_id);
				// 根据商品 goods_id 从最新的数组中查找到最新的索引
				const index = this.cartList.findIndex(item=>item.goods_id === goods_id);
				// 获取商品状态，取反，最终更新回去
				this.cartList[index].goods_check = !this.cartList[index].goods_check;
			}
		}
	}
</script>

<style lang="less">
	// 1.0 购物车
	.cart {
		padding-bottom: 90rpx;
		.cart_item {
			display: flex;
			padding: 20rpx 0;
			// 左边选中按钮
			.cart_item_check {
				width: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			// 右边商品信息
			.cart_item_info {
				flex:1;
				position: relative;
				// 计数器部分
				.count {
					position: absolute;
					right:20rpx;
					bottom:20rpx;
					display: flex;
					align-items: center;
					color:#8A8A8A ;
					.count_btn {
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
						border: 2px solid #ddd;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.count_number {
						// 最小宽度
						min-width: 60rpx;
						color:#666;
						padding:0 5rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
	}
	// 2.0 底部栏
	.bottom {
		padding: 0 20rpx;
		position: fixed;
		left:0;
		right: 0;
		bottom: 0;
		/* #ifdef H5 */
		bottom: 50px;
		/* #endif */
		height: 84rpx;
		border-top: 1rpx solid #ddd;
		background-color: #fff;
		display: flex;
		align-items: center;
		.bottom_label {
			display: flex;
			align-items: center;
			margin-right: 10rpx;
			.bottom_label_check {
				margin-right: 6rpx;
			}
			.bottom_label_text {
				font-size: 22rpx;
				color:#999;
			}
		}

		.bottom_total {
			display: flex;
			align-items: center;
			.bottom_total_text {
				font-size: 26rpx;
				color:#333;
				margin-right: 4rpx;
			}

			.goods_price {
				font-size: 28rpx;
			}
		}

		.bottom_btn {
			background-color: #EA4350;
			width: 150rpx;
			height: 52rpx;
			border-radius: 26rpx;
			font-size: 22rpx;
			color:#fff;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			right: 20rpx;
			&.disabled{
				background-color: #ccc;
			}
		}
	}
	// 3.0 空购物状态
	.cart_empty{
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		.cart_empty_navigator{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
		.cart_empty_image{
			font-size: 200rpx;
		}
		.cart_empty_text{
			background-color: #EB4450;
			color:#fff;
		}
	}
</style>
